<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="static/easyui/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="static/easyui/themes/icon.css">
<link rel="stylesheet" href="static/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="static/bootstrap/css/bootstrap-theme.min.css" />
<script src="static/jquery/jquery-1.12.4.js"></script>
<script src="static/easyui/jquery.easyui.min.js"></script>
<script src="static/easyui/locale/easyui-lang-zh_CN.js"></script>
<title>系统登录</title>
</head>

<style type="text/css">
* {
	margin: 0;
	padding: 0;
	font: "微软雅黑", arial;
}

html, body {
	height: 100%;
}

body {
	background: url(static/imges/login-bg.jpg) center no-repeat;
	background-size: cover;
}

.login_container {
	width: 100%;
	height: 100%;
	display: table;
}

.login_area {
	display: table-cell;
	vertical-align: middle;
}

form {
	width: 280px;
}

table {
	color: #333;
}

td.login_title_container {
	padding-bottom: 30px;
}

label.login_title {
	font-size: 28px;
	font-weight: 500;
	position:relative;
	padding-top:20px;
	width:100%;
}
label.login_title:before{
	content:'';
	display:block;
	width:100%;
	height:5px;
	background:#5baff1;
	position:absolute;
	top:0;
	left:0;
}
input.login_input {
    padding: 5px 10px;
    height: 32px;
    line-height: 32px;
    width: 250px;
    border: 0;
    position:relative;
}



.username_content>td, .password_content>td {
	box-sizing: border-box;
	    padding: 20px 0 10px 30px;
    border-bottom: 1px solid #eee;
    position:relative;
    height:62px;
}
.login_input_container:before{
	content:'';
	display:block;
	width:28px;
	height:28px;
	background: url(static/imges/icon-user.png) center no-repeat;
	background-size: 100% auto;
	position:absolute;
	top:22px;
	left:0;
}
.login_input_container.phone:before{
	background: url(static/imges/icon-phone.png) center no-repeat;
	background-size: 100% auto;
}
.login_input_container.pass:before{
	background: url(static/imges/icon-password.png) center no-repeat;
	background-size: 100% auto;
}
.login_btn_container {
	padding-top: 20px;
}

input[type="submit"] {
	width: 108px;
	padding: 5px;
	height: 38px;
	background-color: #5d83f7;
	color:#fff;
	font-size: 16px;
	border: 0;
	font-weight: 600;
}

.error {
	color: red;
}

.error_container {
	padding-top: 10px;
}

.error_container>td {
	height: 30px;
	line-height: 30px;
}
.container-pc{
	width:1200px;
	margin:auto;
}
.tabs-container{width:100%;position:absolute;top:46px;left:0;}
.tabs-container+.table-container{top:83px;}
.tabs-define {
    font-size: 0;
    border-bottom:1px solid #eee;
}
.tabs-define>div {
	display: inline-block;
	width: 50%;
	vertical-align: top;
	font-size: 14px;
	text-align: center;
	background: #fff;
	padding: 8px;
	cursor:pointer;
}

.tabs-define>div:first-child {
	border-right: 1px solid #eee;
}

.tabs-define>div.active {
	color: #1586FF;
	font-weight: 600;
}
</style>
<body>
	<div class="login_container">
		<div class="title_area">
			<img src="" style="height: 75px;" />
		</div>
		
		<div class="login_area">
		<div class="container-pc">
			
			<form id="login_form" method="post" action="login.do">
			<div><label class="login_title">
							</label></div>
				<div class="tabs-define">
			<div id="todo" class="active">用户名登录</div>
			<div id="completed" class="">手机号登录</div>
		</div>
					<table class="login_table">
					<tr class="username_content" id="usernamecontainer">
						<td class="login_input_container">
							<input id="username" name="username" class="login_input" type="text" />
						</td>
					</tr>
					<tr class="username_content" id="mobilecontainer" style="display:none;">
						<td class="login_input_container phone">
							<input id="mobile" name="mobile" class="login_input" type="text" />
						</td>
					</tr>
					<tr class="password_content">
						<td class="login_input_container pass">
							<input id="password" name="password" class="login_input" type="password" />
						</td>
					</tr>
					<tr class="error_container">
						<td colspan="2" class="text-center">
							<label class="error" th:text="${err_msg}"></label>
						</td>
					</tr>
					<tr>
						<td colspan="2" class="login_btn_container">
							<input class="login_btn" type="submit" value="登&nbsp;&nbsp;&nbsp;录" />
						</td>
					</tr>
					
				</table>
			</form>
		</div>
		</div>
	</div>
</body>
<script>
$(document).ready(function() {
	$("#todo").click(function(){
		$(this).siblings().removeClass("active");
		$(this).addClass("active");
		$("#usernamecontainer").css("display","block");
		$("#mobilecontainer").css("display","none");
		})
		$("#completed").click(function(){
			$(this).siblings().removeClass("active");
			$(this).addClass("active");
			$("#usernamecontainer").css("display","none");
			$("#mobilecontainer").css("display","block");
		})
	
});
</script>

</html>